<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>04购物车（底部栏进入）</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="screen-orientation" content="portrait">
<meta name="x5-orientation" content="portrait">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="Expires" content="-1">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Pragma" content="no-cache">
<link href="css/public.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<script src="js/jquery-2.1.4.min.js"></script>
</head>
<body class="graybody">
<!-- header -->
<header class="header header_buyCar position_fixedTop">
	<div class="header_center fontcolor">购物车</div>
    <div class="header_right fontcolor"><a href="#" class="gwcbj edit_btn">编辑</a></div>
</header>
<div class="empty45"></div>
<!-- 内容区 -->
<section class="gwclist">
	<h4 class="gwctit"><label class="shoplabel gwcradio checkBox_all_1 gwcchecked"><input type="checkbox" class="che_eve" checked name="shopradio" disabled/></label><a href="#">店铺名称</a></h4>
    <ul class="gwcul">
        <li>
        	<label class="listlabel gwcradio gwcchecked"><input class="che_eve" checked type="checkbox" name="listradio" disabled/></label>
            <a href="#" class="left"><img src="images/listimg.jpg" width="82" height="82" /></a>
            <div class="gwcright">
            	<div class="sp_left">
                    <h5 class="gwcright1"><a href="#">摩安珂连衣裙女2015欧美春 装米奇贴布绣个性卡通M</a></h5>
                    <p class="gwcright2">颜色：米白色， 尺码：XLL</p>
                    <div class="contnumdiv">
                        <span class="numbtn disnumbtn numbtn1">-</span><input type="button" class="numtext" value="1" max="1000" /><span class="numbtn numbtn2">+</span>
                    </div>
                </div>
                <div class="sp_right">
                    <p class="price_ago">￥2319.00</p>
                    <p class="gwcright3">￥300.01</p>
                </div>
            </div>
        </li>
        <li>
        	<label class="listlabel gwcradio gwcchecked"><input type="checkbox" class="che_eve" checked name="listradio" disabled/></label>
            <a href="#" class="left"><img src="images/listimg.jpg" width="82" height="82" /></a>
            <div class="gwcright">
            	<div class="sp_left">
                    <h5 class="gwcright1"><a href="#">摩安珂连衣裙女2015欧美春 装米奇贴布绣个性卡通M</a></h5>
                    <p class="gwcright2">颜色：米白色， 尺码：XLL</p>
                    <div class="contnumdiv">
                        <span class="numbtn disnumbtn numbtn1">-</span><input type="button" class="numtext" value="1" max="1000" /><span class="numbtn numbtn2">+</span>
                    </div>
                </div>
                <div class="sp_right">
                    <p class="price_ago">￥2319.00</p>
                    <p class="gwcright3">￥200.00</p>
                </div>
            </div>
        </li>
    </ul>
</section>
<section class="gwclist">
	<h4 class="gwctit"><label class="shoplabel gwcradio checkBox_all_1 gwcchecked"><input type="checkbox" class="che_eve" checked name="shopradio" disabled/></label><a href="#">店铺名称</a></h4>
    <ul class="gwcul">
        <li>
        	<label class="listlabel gwcradio checkBox_all_1 gwcchecked"><input type="checkbox" class="che_eve" checked name="listradio" disabled/></label>
            <a href="#" class="left"><img src="images/listimg.jpg" width="82" height="82" /></a>
            <div class="gwcright">
            	<div class="sp_left">
                    <h5 class="gwcright1"><a href="#">摩安珂连衣裙女2015欧美春 装米奇贴布绣个性卡通M</a></h5>
                    <p class="gwcright2">颜色：米白色， 尺码：XLL</p>
                    <div class="contnumdiv">
                        <span class="numbtn disnumbtn numbtn1">-</span><input type="button" class="numtext" value="1" max="1000" /><span class="numbtn numbtn2">+</span>
                    </div>
                </div>
                <div class="sp_right">
                    <p class="price_ago">￥2319.00</p>
                    <p class="gwcright3">￥100.00</p>
                </div>
            </div>
        </li>
        
        
    </ul>
</section>
<!---可能想要---->
<div class="looklist">
	<h4 class="looktit"><span>你可能还想要</span></h4>
    <ul class="lookul clearafter">
    	<li>
        	<a href="#">
                <p class="lookimg"><img src="images/listimg.jpg" width="100%" /></p>
                <div class="show_text">
                    <h5 class="lookh5">MO&Co.翻驳领长袖长线条 直筒休闲毛呢舒适新款大衣</h5>
                    <p class="lookmoney"><span class="left">￥2319.00</span><span class="right collect_look">1100</span></p>
                </div>
            </a>
        </li>
    	<li>
        	<a href="#">
                <p class="lookimg"><img src="images/listimg.jpg" width="100%" /></p>
                <div class="show_text">
                    <h5 class="lookh5">MO&Co.翻驳领长袖长线条 直筒休闲毛呢舒适新款大衣</h5>
                    <p class="lookmoney"><span class="left">￥2319.00</span><span class="right collect_look">1100</span></p>
                </div>
            </a>
        </li>
    	<li>
        	<a href="#">
                <p class="lookimg"><img src="images/listimg.jpg" width="100%" /></p>
                <div class="show_text">
                    <h5 class="lookh5">MO&Co.翻驳领长袖长线条 直筒休闲毛呢舒适新款大衣</h5>
                    <p class="lookmoney"><span class="left">￥2319.00</span><span class="right collect_look">1100</span></p>
                </div>
            </a>
        </li>
    	<li>
        	<a href="#">
                <p class="lookimg"><img src="images/listimg.jpg" width="100%" /></p>
                <div class="show_text">
                    <h5 class="lookh5">MO&Co.翻驳领长袖长线条 直筒休闲毛呢舒适新款大衣</h5>
                    <p class="lookmoney"><span class="left">￥2319.00</span><span class="right collect_look">1100</span></p>
                </div>
            </a>
        </li>

    </ul>
    <div class="clear"></div>
</div>

<div class="empty110"></div>
<!-----购物车栏----->
<section class="gwcbottom buyCont_box">
	<div class="gwcbottom1">
    	<div class="gwcbottomrad"><span class="gwcradio marginT22 checkBox_all2 gwcchecked" id="labelall"><input type="checkbox" class="check_allClass" checked id="radioall" /></span><label for="radioall">全选</label></div>
        <div class="gwcbottomje"><b class="orange">合计：￥<span class="priceAll">0</span></b><br/>总额：￥<span class="priceAll">0</span></div>
    </div>
    <a class="gwcbottom2 indexbgcolor">去结算<span class="buy_allNum">（0）</span></a>
</section>
<!-----编辑栏----->
<section class="gwcbottom edit_box" style="display:none">
	<div class="gwcbottom1 edit_left">
    	<div class="gwcbottomrad"><span class="gwcradio marginT22 checkBox_all2" id="labelal2"><input type="checkbox" class="check_allClass"  id="radioal2" /></span><label for="radioall">全选</label></div>
    </div>
	<div class="edit_right">
        <a class="edit_a share_sp">分享</a>
        <a class="edit_a addCollect_sp">加入收藏</a>
        <a class="edit_a del_sp indexbordercolor fontcolor">删除</a>
    </div>
</section>
<!-----底部导航----->
<div class="tagcolumn">
    <ul>
        <li><a href="index"><i class="tagico1"></i><p>首页</p></a></li>
        <li><a href="type"><i class="tagico2"></i><p>分类</p></a></li>
        <li><a href="supplies"><i class="tagico3"></i><p>供货商</p></a></li>
        <li class="cli"><a href="#"><i class="tagico4"><b class="buyNum indexbgcolor">9</b></i><p>购物车</p></a></li>
        <li><a href="user"><i class="tagico5"></i><p>我的</p></a></li>
    </ul>
</div>
<!-- 分享 -->
<div class="blackbg"></div>
<section class="sharesec">
	<ul class="shareul">
        <li><a href="#"><img src="images/shareico1.png" width="55" /><span>微信好友</span></a></li>
        <li><a href="#"><img src="images/shareico2.png" width="55" /><span>微信朋友圈</span></a></li>
        <li><a href="#"><img src="images/shareico3.png" width="55" /><span>新浪微博</span></a></li>
        <li><a href="#"><img src="images/shareico4.png" width="55" /><span>QQ好友</span></a></li>
        <li><a href="#"><img src="images/shareico5.png" width="55" /><span>QQ空间</span></a></li>
        <li><a href="#"><img src="images/shareico6.png" width="55" /><span>更多</span></a></li>
    </ul>
    <a class="shareno">取消</a>
</section>
<script>
$(function(){
	//头部编辑点击展示
	$(".edit_btn").click(function(){
		//清除所有的check选择框样式
		$("input[class='che_eve']:checked").prop("checked",false);
		$("input[class='check_allClass']:checked").prop("checked",false);
		$(".listlabel,.shoplabel,.checkBox_all2").removeClass("gwcchecked");
		//
		if($(".edit_box").is(":hidden")){
			$(".edit_box").show();
			$(".buyCont_box").hide();
			$(this).html("完成");
		}else{
			$(".edit_box").hide();
			$(".buyCont_box").show();
			$(this).html("编辑");
		}
	})
	//分享
	$(".share_sp").click(function(){
		$(".blackbg").fadeIn(100);
		$(".sharesec").slideDown();
	});
	$(".shareno,.blackbg").click(function(){
		$(".blackbg").fadeOut();
		$(".sharesec").slideUp();
	});
	//收藏
	$(".addCollect_sp").click(function(){
		confirm("确定将该商品加入收藏么？")
	})
	//删除
	$(".del_sp").click(function(){
		confirm("确定删除该商品么？")
	})
	
	//
	$(window).resize(function(){
		winwid = $(window).width();
		if(winwid<=640){
			$("html").css("font-size",(winwid/320)*100+"px");
		}else{
			$("html").css("font-size","200px");
		};
	}).resize();
	//统一数量加减
	$(".gwcul li .numtext").each(function(){
		var maxleng = $(this).attr("max").length;
        $(this).attr("maxlength",maxleng);
	});
	$(".gwcul li .numbtn1").click(function(){
            var maxnum = $(this).siblings(".numtext").attr("max");
            var textvar = parseFloat( $(this).siblings(".numtext").val() );
            if( textvar>1 ){
                textvar--;
                $(this).siblings(".numtext").val( textvar );
                $(this).siblings(".numbtn2").removeClass("disnumbtn");
            };
            if(textvar<=1){
                $(this).addClass("disnumbtn");
            };
    });
	$(".gwcul li .numbtn2").click(function(){
		var maxnum = $(this).siblings(".numtext").attr("max");
		var textvar = parseFloat( $(this).siblings(".numtext").val() );
		if( textvar<maxnum ){
			textvar++;
			$(this).siblings(".numtext").val( textvar );
			$(this).siblings(".numbtn1").removeClass("disnumbtn");
		}
		if(textvar>=maxnum){
			$(this).addClass("disnumbtn");
		};
	});
	$(".gwcul li .numtext").blur(function(){
		var maxnum = $(this).attr("max");
		var textvar = parseFloat( this.value );
		if(this.value==""){
			this.value=1;
			$(this).siblings(".numbtn1").addClass("disnumbtn");
			$(this).siblings(".numbtn2").removeClass("disnumbtn");
		};
		if( textvar<1 ){
			this.value=1;
		};
		if( textvar>maxnum ){
			alert("最大库存为"+maxnum+"件");
			this.value=maxnum;
			$(this).siblings(".numbtn1").removeClass("disnumbtn");
			$(this).siblings(".numbtn2").addClass("disnumbtn");
		};
	});
	//-------订单全选
	var checkyz=$(".che_eve"); // 除了全选，所有的input
	//二级全选(all)
	$(".checkBox_all2").click(function(){
		if(checkyz.prop("checked")==true){
			$(this).children("input").prop("checked",false);
			checkyz.prop("checked",false);
			$(".che_eve").parents("label").removeClass("gwcchecked");
			$(this).removeClass("gwcchecked");
		}else{
			$(this).children("input").prop("checked",true);
			checkyz.prop("checked",true);
			$(".che_eve").parents("label").addClass("gwcchecked");
			$(this).addClass("gwcchecked");
		}
	})
//----------------------------------------------------------
	checkyz.parents("label").click(function(){
		// 单选
		var inp=$(this).children("input");
		if(inp.prop("checked")==true){
			inp.prop("checked",false);
			$(this).removeClass("gwcchecked");
		}else{
			inp.prop("checked",true);
			$(this).addClass("gwcchecked")	;
		}
		// 是否是全选状态
		if($("input[class='che_eve']:checked").length==checkyz.length){
			$(".checkBox_all2 input").prop("checked",true);
			$(".checkBox_all2").addClass("gwcchecked");
		}else{
			$(".checkBox_all2 input").prop("checked",false);
			$(".checkBox_all2").removeClass("gwcchecked");
		}
	})
		
	//一级全选
	$(".checkBox_all_1").click(function(){
		var thisIpt = $(this).children("input.che_eve");
		var childIpt = $(this).parents(".gwctit").siblings(".gwcul").find("input.che_eve");
		if(thisIpt.prop("checked")==true){
			childIpt.prop("checked",true);
			childIpt.parent().addClass("gwcchecked");
		}else{
			childIpt.prop("checked",false);
			childIpt.parent().removeClass("gwcchecked");
		}
		if($("input[class='che_eve']:checked").length==checkyz.length){
			$(".checkBox_all2 input").prop("checked",true);
			$(".checkBox_all2").addClass("gwcchecked");
		}else{
			$(".checkBox_all2 input").prop("checked",false);
			$(".checkBox_all2").removeClass("gwcchecked");
		}
		
	})
	$(".listlabel").click(function(e) {
		var parentIpt = $(this).parents(".gwcul").siblings(".gwctit").find("input.che_eve");
        var siblingsIpt = $(this).parents(".gwcul").find("input.che_eve");
		if($(this).parents(".gwcul").find("input[class='che_eve']:checked").length==siblingsIpt.length){
			parentIpt.prop("checked",true);
			parentIpt.parent().addClass("gwcchecked");
		}else{
			parentIpt.prop("checked",false);
			parentIpt.parent().removeClass("gwcchecked");
		}
		if($("input[class='che_eve']:checked").length==checkyz.length){
			$(".checkBox_all2 input").prop("checked",true);
			$(".checkBox_all2").addClass("gwcchecked");
		}else{
			$(".checkBox_all2 input").prop("checked",false);
			$(".checkBox_all2").removeClass("gwcchecked");
		}
    });
// 购物车数量
	$(window).load(function(){
		var buyN=$(".gwcul input[class='che_eve']:checked").length;
		$(".buy_allNum").html("("+buyN+")");
	})
//----点击计算价格----
	$("body").on("click",".gwcradio,.checkBox_all2",function(){
		var priceNum=0;
		var price=[];
		$(".gwcul input[class='che_eve']:checked").each(function() {
			var count= $(this).parents("label").siblings(".gwcright").find(".numtext").val();
			var html_p=$(this).parents("label").siblings(".gwcright").find(".gwcright3").html();
			price.push(html_p.substr(1)*parseInt(count));
		});
		for(var i=0;i<price.length;i++){
			priceNum+=parseFloat(price[i]);	
		}
		$(".priceAll").html(priceNum)
		var buyN=$(".gwcul input[class='che_eve']:checked").length;
		$(".buy_allNum").html("("+buyN+")");

	})
	//点击加减计算
	$("body").on("click",".numbtn",function(){
		var priceNum=0;
		var price=[];
		$(".gwcul input[class='che_eve']:checked").each(function() {
			var count= $(this).parents("label").siblings(".gwcright").find(".numtext").val();
			var html_p=$(this).parents("label").siblings(".gwcright").find(".gwcright3").html();
			price.push(html_p.substr(1)*parseInt(count));
		});
		for(var i=0;i<price.length;i++){
			priceNum+=parseFloat(price[i]);	
		}
		$(".priceAll").html(priceNum)

	})
		
});
</script>
</body>
</html>